<template>
    <div class="slide-bar" ref="sliBar">
        <ul class="slide-waper" ref="sliWap">
            <li v-for="(item,index) in fenleiLists" :key="index" class="slide-item"
            :style="{color:currentIndex == index ? '#eb4450' : '#333',background:currentIndex == index ? '#fff' : '#f4f4f4'}"
            @click="changeData(item,index)">
                {{item.cat_name}}
            </li>
        </ul>
    </div>
</template>

<script>
import {getFenLeiList} from "../../api/fenlei/index"

export default {
    name: "SlideBar",
    data(){
        return {
            fenleiLists:[],
            currentIndex : 0
        }
    },
    created(){
        getFenLeiList().then(res => {
            console.log(res)
            this.fenleiLists = res.data.message
            this.$emit('emitData',this.fenleiLists[0])
        })
    },
    mounted() {//挂载完毕的生命周期函数
        let sY,nY
        this.$refs.sliBar.ontouchstart = function(e){
            console.log(e.targetTouches[0].clientY)
            sY = e.targetTouches[0].clientY
        }
        this.$refs.sliBar.ontouchend = (e)=>{
            console.log(e.changedTouches[0].clientY)
            nY = e.changedTouches[0].clientY
            if(Math.abs(nY - sY) > 5){
                var t = this.$refs.sliWap.offsetTop
                this.$refs.sliWap.style.top = nY - sY +t + "px"
            }
        }
        // this.$refs.sliWap
    },
    methods:{
        changeData(v,i){
            this.currentIndex = i
            this.$emit('emitData',v)
        }
    }
}
</script>

<style lang="less" scoped>
    .slide-bar{
        width:100%;
        height:100%;
        overflow: hidden;
        position: relative;
        .slide-waper{
            width:100%;
            // height:100%;
            position:absolute;
            top: 0;
            left: 0;
            // overflow: auto;
            // overflow: hidden;
            .slide-item{
                width:100%;
                text-align:center;
                line-height:50px;
                border-bottom: 1px solid #eee;
                background:#f4f4f4;
            }
        }
    }
</style>